<template>
	<view class="container">
		<view class="item">
			<view class="title" id="question" adjust-position="true" auto-height="true">
				问题:{{question}}
			</view>
		</view>

		<!-- <view class="uni-answer">我来回答：</view> -->
		<view v-if="!isPatient">
		<view class="area">
			<view class="uni-textarea">
				<textarea @input="inputChange" placeholder-style="color:#999999" placeholder="我来回答..." auto-height />
			</view>
		</view>
		
		<view class="">
			<button class="submitbtn" @click="submitquestion()">提交</button>
		</view>
		<view class="line"></view>
		</view>
		<text>其他回复</text>
		<view class="doctorAnswers" v-for="item in list">
			<view class="doctorname">
				医生姓名：{{item.name}}
			</view>
			<view class="answer">
				答复:{{item.answer}}
			</view>
		</view>

	</view>
</template>

<script>
	import { detailQuestion, answer } from '@/api/index.js'
	export default {
		data() {
			return {
				list: [],
				obj: {
					id: '', // 问题id
					doctorId: '', //医生id
					answer: ''
				},
				question: '',
				
			}
		},
		onLoad(option) {
			console.log(5454)
			this.obj.id = option.id
			this.obj.doctorId = uni.getStorageSync('user').id
			this.isPatient = uni.getStorageSync('user').patient
			this.getList()
		},
		methods: {
			getList() {
				detailQuestion({id: this.obj.id}).then(res => {
					if(res.code !== 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.list = res.data.item.answers || []
					this.question = res.data.item.question || ''
				})
			},
			inputChange(e){
				this.obj.answer = e.detail.value
			},
			submitquestion() {
				if(!this.obj.answer) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				answer(this.obj).then(res => {
					if(res.code !== 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.obj.answer = ''
					this.getList()
				})
			}


		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
	}
	.title {
		margin-top: 30rpx;
		min-height: 30rpx;
		font-size: larger;
		font-weight: bold;
		text-align: center;
	}

	.doctorAnswers {
		background-color: #ffffff;
		min-height: 40rpx;
		padding: 10rpx;
		margin: 10rpx;
		
		border-top: 1px solid #F5F5F5;
		border-bottom: 1px solid #F5F5F5;
	}

	.doctorname {
		padding-bottom: 40rpx;
	}
	.area {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.uni-textarea {
		margin-top: 80rpx;
		padding: 20rpx;
		display: flex;
		border:1px solid #999999;
		border-radius:10px;
		height: 250rpx;
		width: 600rpx;
	}
	/* .uni-answer {
		margin-top: 50rpx;
	} */

	.answer {
		color: #4a8d9c;
		
	}
button {
	  width: 600rpx;
	  margin-top: 100rpx;
	  background-color: rgba(74,141,156,0.9);
	  color: white;
	  border-radius: 98rpx;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	}
	
	
	button::after {
	  border-radius: 98rpx;
	  border: 0; 
	}
	.line {
		margin-top: 40rpx;
		width: 100%;
		height: 10rpx;
		background-color: #F5F5F5;
	}
	text {
		font-size: medium;
		font-weight: bold;
		margin: 10rpx;
	}
	/* .submitbtn {
		border: 1px solid #4a8d9c;
		margin-top: 50rpx;
		height: 100rpx;
		width: 200rpx;
		align-items: flex-start;
		margin-left: 0;
	} */

	
</style>
